<route lang="json5" type="page">
  {
    layout: 'default',
    style: {
      navigationBarTitleText: '课程详情',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import ClassCard from '@/components/ClassCard.vue'
import LessonCell from '@/components/LessonCell.vue'
import { ClassApi, ShopApi } from '@/apis'
import { useUserStore } from '@/stores'
import { ofDate } from '@/utils/common'

const userStore = useUserStore()

const id = ref('')
const loading = ref(false)
const classInfo = ref<ShopApi.ShopClassResp>()
const lessonList = ref<ClassApi.SelectiveClassLesson[]>([])

const getShopClassDetail = async () => {
  classInfo.value = await ShopApi.getShopClassDetail(id.value)
}

const getClassLessonList = async () => {
  loading.value = true
  try {
    const res = await ClassApi.getClassLessonList(id.value)
    lessonList.value = res.map((item) => {
      return {
        select: false,
        ...item,
      }
    })
  } finally {
    loading.value = false
  }
}

const lessonIndexes = computed(() => lessonList.value.filter(item => item.lessonStatus === 1).map(item => item.lessonIndex))
const selectCount = computed(() => lessonIndexes.value.length)

const canAddCartItem = computed(() => {
  if (!classInfo.value) {
    return false
  }
  if (!classInfo.value.enrollStartTime) {
    return true
  }
  const enrollStartTime = ofDate(classInfo.value.enrollStartTime)
  return selectCount.value > 0 && new Date() > enrollStartTime
})

const addCartItem = async () => {
  try {
    await ShopApi.addCartItem({
      studentId: userStore.currentStudent.id,
      classId: classInfo.value.id,
      lessonIndexes: lessonIndexes.value,
    })
    uni.navigateTo({
      url: '/pages/shop/cart/index',
    })
  } catch (err) {
    console.warn('加入购物车失败: ', err)
  }
}

onLoad((options) => {
  if (options.id) {
    // classInfo.value = JSON.parse(uni.getStorageSync('selectedClass'))
    id.value = options.id
    getShopClassDetail()
    getClassLessonList()
  }
})

onUnload(() => {
  // uni.removeStorageSync('selectedClass')
})
</script>

<template>
  <view v-if="loading" class="flex-row-center-center bg-white page">
    <wd-loading color="#33AD7C" />
  </view>
  <template v-else-if="classInfo">
    <view class="content px py">
      <ClassCard :info="classInfo" :show-enroll-time="true" />

      <view class="flex-row-between-center">
        <view class="section">
          课次详情
        </view>
        <text class="text-14px leading-20px text-secondary">
          共{{ lessonList.length }}次
        </text>
      </view>

      <view v-for="(item, index) in lessonList" :key="index" class="mb">
        <!-- @click="selectLesson(item)" -->
        <LessonCell :active="item.select" :disabled="item.lessonStatus !== 1" :data="item" />
      </view>
    </view>

    <view class="footer">
      <view class="flex items-center justify-between gap-[20rpx] px-[30rpx] py-[12rpx]">
        <view>
          <view>
            <text class="font-size-[28rpx] color-[#DD0A0A]">
              ￥
            </text>
            <text class="font-size-[36rpx] color-[#DD0A0A]">
              {{ classInfo.unitPrice * selectCount }}
            </text>
          </view>
          <view class="font-size-[24rpx]">
            ￥{{ classInfo.unitPrice }}/次 共{{ selectCount }}次课
          </view>
        </view>
        <view class="flex gap-[24rpx]">
          <wd-button type="warning" :disabled="!canAddCartItem" :round="false" @click="addCartItem">
            加入购课单
          </wd-button>
        </view>
      </view>
    </view>
  </template>
</template>

<style lang="scss" scoped>
  .content {
    height: calc(100vh - 160rpx) !important;
    overflow: scroll;
  }

  .footer {
    position: fixed;
    left: 0px;
    bottom: 0px;

    height: 160rpx;
    width: 100%;
    background: white;
    box-shadow: 0px -4px 4px 0px #0000000D;

  }
</style>
